import React, { memo } from "react";
import { useNavigate } from "react-router-dom";
import SongSheetItemWarrper from "./style";
import NumberFormat from '@/util/NumberFormat'
import {PlayCircleOutlined,CustomerServiceOutlined } from '@ant-design/icons';
const index = memo((props) => {
  const navigate = useNavigate();
  const goToDetail = (id) => {
    navigate("/playlistDetail/" + id);
  };
  const {n,i,type = 'A'} = props
  return (
    <SongSheetItemWarrper key={i} onClick={(e) => goToDetail(n.id)}>
      <div className="cover">
        <PlayCircleOutlined className="playIcon" />
      </div>
      {
        type=="A"?<img src={n.picUrl} alt="" />:<img src={n.coverImgUrl} alt="" />
      }
      
      {n.playCount && (
        <div className="play_count">
          <CustomerServiceOutlined className="icon" />
          {NumberFormat(n.playCount)}万
        </div>
      )}
    </SongSheetItemWarrper>
  );
});

export default index;
